<template>
    <div class="pad20">
        <el-card class="box-card">
        <el-form :inline="true" size="mini" :model="formData"  >
            <el-form-item label="店铺：" prop="name" >
                <el-input type="text" v-model="formData.name"  placeholder="请输入店铺名"></el-input>
            </el-form-item>
            <el-form-item label="订单编号："prop="soid">
                <el-input type="text" v-model="formData.soid"  placeholder="请输入订单编号"></el-input>
            </el-form-item>
            <el-form-item label="订单日期：" prop="orderData">
                <el-input type="text" v-model="formData.orderData"  placeholder="请输入订单日期"></el-input>
            </el-form-item>
          <br/>
            <el-form-item >
                <el-button icon='el-icon-search' type="primary" @click="initTable">查询</el-button>
                <el-button icon='el-icon-refresh' class="filter-item" @click="handleReset">重置</el-button>
            </el-form-item>
        </el-form>

        <template>


            <el-table
                    :data="tableData"
                    style="width: 100%" >
                <el-table-column
                        prop="id"
                        label="序号"
                       >
                </el-table-column>
                <el-table-column
                        prop="username"
                        label="用户"
                        >
                </el-table-column>
                <el-table-column
                        prop="order_pay"
                        label="订单金额"
                        >
                </el-table-column>
                <el-table-column
                        label="平台所得"
                        >
                    <template slot-scope="scope">
                        {{fun(scope.row.order_pay*0.05)}}
                    </template>
                </el-table-column>
                <el-table-column
                        prop="soid"
                        label="订单编号"
                        width="150px" :show-overflow-tooltip='true'>
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="店铺"
                        width="150px">
                </el-table-column>
                <el-table-column
                        prop="order_date"
                        label="订单日期"
                        width="150px">
                </el-table-column>
                <el-table-column
                        prop="state"
                        label="订单状态"
                        width="150px" :show-overflow-tooltip='true'>
                    <template slot-scope="scope">
                        <el-tag type="success" v-if="scope.row.state==0">支付成功</el-tag>
                        <el-tag type="primary" v-if="scope.row.state==1">待支付</el-tag>
                        <el-tag type="danger" v-if="scope.row.state==2">未支付</el-tag>
                    </template>
                </el-table-column>
                <el-table-column
                        align="center"
                        label="操作"
                        width="150px">
                    <template slot-scope="scope">
                        <el-button type="primary" icon="el-icon-share" @click="detailedMsg(scope.row.id)">详细信息</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </template>
            <!--分页-->
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync=this.formData.currentPage
                    :page-sizes="pageSizes"
                    :page-size=this.formData.pageSize
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
            <el-dialog
                    title="详细信息"
                    :visible.sync="detaileVisiable"
                    width="41.7%">
                <el-table
                        :data="tableData1"
                        border
                        style="width: 100%">
                    <el-table-column label="商品简介" align="center">
                        <el-table-column
                                prop="img"
                                label="商品图片"
                                width="150px">
                            <template slot-scope="scope">
                                <img :src="scope.row.img" width="70" height="50" align="center">
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="goodsname"
                                label="商品名称"
                                width="150px">
                        </el-table-column>
                        <el-table-column
                                prop="gsname"
                                label="商品规格"
                                width="150px">
                        </el-table-column>
                        <el-table-column
                                prop="tbQuantity"
                                label="商品数量"
                                width="150px">
                        </el-table-column>
                    </el-table-column>

                </el-table>
                <el-table
                        :data="tableData1"
                        border
                        style="width: 100%">
                    <el-table-column label="商品价格" align="center">
                        <el-table-column
                                prop="goodsname"
                                label="商品名称"
                                width="150px">
                        </el-table-column>
                        <el-table-column
                                prop="dprice"
                                label="商品单价"
                                width="150px">
                        </el-table-column>
                        <el-table-column
                                prop="zprice"
                                label="商品总价"
                                width="150px">
                        </el-table-column>
                        <el-table-column
                                prop="sname"
                                label="所属店铺"
                                width="150px">
                        </el-table-column>
                    </el-table-column>
                </el-table>

                <span slot="footer" class="dialog-footer">
                    <el-button @click="detaileVisiable = false">关闭</el-button>
                </span>
            </el-dialog>
        </el-card>

    </div>
</template>

<script>
    export default {
        name: "list",
        data() {
            return {
                tableData1:[

                ],
                tableData:[],
                formData:{
                    //当前页码
                    currentPage: 1,
                    //每也显示的个数
                    pageSize: 3,
                    name:"",
                    soid:"",
                    orderData:''
                },
                pageSizes:[1,3,5,7],
                //总条数
                total:0,
                //当前页码
                currentPage: 1,
                //每也显示的个数
                pageSize: 3,
                detaileVisiable:false,
                ruleForm:{}
            }
        },
        created() {
            this.initTable();
        },

        //查询所有的
        methods:{
            //详情信息
            detailedMsg(id){
                this.detaileVisiable = true;
                this.$http.post("/order/orderShop/orderDetail/"+id).then(result=>{
                    console.log(result);
                    this.tableData1 = result.data.data;
                })
            },
            //重置
            handleReset(){
                this.formData={
                    //当前页码
                    currentPage: 1,
                    //每也显示的个数
                    pageSize: 3,
                    name:"",
                    soid:"",
                    orderDate:''
                },
                this.initTable();
            },
            //查询全部
            initTable(){
                this.$http.post("/order/order/findAllOrder",this.formData).then(result=>{
                    this.tableData = result.data.data.records;
                    this.total = result.data.data.total;
                })
            },
            //分页相关函数
            handleSizeChange(val) {
                this.formData.pageSize = val
                this.initTable();
            },
            handleCurrentChange(val) {
                this.formData.currentPage = val
                this.initTable()
            },
            fun(val){
                return Number(val).toFixed(2);
            },
        },


    }
</script>

<style scoped>

</style>